---
import FeaturedItem, { FeaturedItemType } from './FeaturedItem.astro';

export interface Props {
  featuredItems: FeaturedItemType[];
  heading: string;
}

const { featuredItems, heading } = Astro.props;
---

<div class='py-4 sm:py-14 border-b border-b-[#1e293c] relative'>
  <div class='container'>
    <h2 class='hidden sm:flex absolute rounded-lg -top-[17px] left-1/2 -translate-x-1/2 bg-slate-900 py-1 px-3 border border-[#1e293c] text-md text-slate-400 font-regular'>
      {heading}
    </h2>

    <ul class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2'>
      {
        featuredItems.map((featuredItem) => (
          <li>
            <FeaturedItem
              text={featuredItem.text}
              url={featuredItem.url}
              isNew={featuredItem.isNew}
              isUpcoming={featuredItem.isUpcoming}
            />
          </li>
        ))
      }
    </ul>
  </div>
</div>
